<template>
    <ul class="clearfix remindUpload">
        <li class="col-sm-4 file-image" v-for="(image,index) in imgesList" :key="index">
            <div >
                <img  :src="image.url" width="100%" height="80px" 
                    v-if="image.fileType.toLowerCase()=='png'
                    || image.fileType.toLowerCase()=='jpg' 
                    || image.fileType.toLowerCase()=='jpeg' 
                    || image.fileType.toLowerCase()=='gif'"/>
                <div width="100%" height="80px" class="pic-bg-fj" v-else></div>
            </div>
            <span class="closeImg" @click="delImg(index)">X</span>
        </li>
        <li class="col-sm-4 file-image" >
            <div class="file-upload">
                <input ref="imageUpload" multiple type="file" class="file-btn" style="width:100%;" name="files" id="files" @change="onFileChange" >
                <i class="layui-icon"></i>
            </div>
        </li>
    </ul>
</template>
<style scoped>
    .remindUpload{max-height: 200px;overflow: auto;overflow-x: hidden;}
	.remindUpload li{margin-top: 8px;}
    .remindUpload .file-upload{width: 100%;height: 80px;padding:10px;}
    .closeImg{position: absolute;right: -2px;top: -6px;border: 1px solid #999;cursor:pointer;
        border-radius: 20px;width: 16px;height: 16px;text-align: center;font-size: 12px;color: #999;}
    .closeImg:hover{border: 1px solid #666;color: #666;}
    /* .file-btn {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    outline: none;
    background-color: transparent;
    filter: alpha(opacity=0);
    -moz-opacity: 0;
    -khtml-opacity: 0;
    opacity: 0;
    cursor: pointer;
    z-index: 0;
    }
    .file-upload {
        width: 150px;
        height: 115px;
        position: relative;
        padding: 30px;
        border: 1px dashed #e2e2e2;
        background-color: #fff;
        text-align: center;
        cursor: pointer;
        color: #999;
        display: inline-block;
    } */
</style>

<script>
	export default{
        props: ["uploadState"],
		data() {
			return {
                imgesList:[],
                thisVal:''
			}
        },
        watch:{
            uploadState:{
                handler: function(val, oldVal){
                    if(!val){
                        this.imgesList=[]
                        this.$emit('fileList', '1');
                    }
                },
            }
        },
		methods: {
			onFileChange:function (e) {
                var _self = this;
                var iLayer=layer.load(0, {shade: false}); //弹出加载层
                var files = e.target.files || e.dataTransfer.files;
                if(files.length>5){
                    layer.msg("一次最多上传5张");
                    layer.close(iLayer)
                    return false
                }
                if(files.length>0){
                    for(var i = 0; i < files.length; i++){
                        var size = files[0].size;
                        if(size > 3145728){
                            layer.msg("图片大小不能超过3M");
                            return;
                        }
                       _self.createImage(files[i]);
                    }
                }
                e.target.value="";
            },
            createImage(file) {
                var _self = this;
                var reader = new FileReader();
                reader.readAsDataURL(file);
                let indexNum = file.name.lastIndexOf(".")+1;
                reader.onload = e =>{
                     //上传附件
                    let msg=e.target.result;
                    layer.load(0, {
                        shade: false
                    }); //弹出加载层
                    var myForm = new FormData(); //创建formdata
                    var blobBin = _self.dataURLtoBlob(msg); //base64转换blob
                    myForm.append("blobObject", blobBin); //想formData添加blob数据
                    myForm.append("suffix", file.name.substr(file.name.lastIndexOf("."))); //添加文件后缀
                    var url = _self.utilHelper.apiUrl + '/api/uploadBase64ToQiNiu';
                    _self.$http.post(url, myForm).then((response) => {
                        layer.closeAll('loading'); //关闭加载层
                        var data = response.body;
                        if(data.result == "1") {
                            _self.imgesList.push({url:data.resData.imgName,fileType:file.name.substr(indexNum),isQiNiu:true})
                            _self.$emit('fileList', _self.imgesList);
                        } else {
                            layer.msg("图片上传失败，请重试");
                        }
                    }, (response) => {
                        layer.msg(response);
                    });
                };
            },
            //将base64转换blob
			dataURLtoBlob(dataUrl) {
				var arr = dataUrl.split(','),
					mime = arr[0].match(/:(.*?);/)[1],
					bstr = atob(arr[1]),
					n = bstr.length,
					u8arr = new Uint8Array(n);
				while(n--) {
					u8arr[n] = bstr.charCodeAt(n);
				}
				return new Blob([u8arr], {
					type: mime
				});
            },
            delImg(index){
                this.imgesList.splice(index, 1);
                this.$emit('fileList', this.imgesList);
            }
		}
	}
</script>